<template>
  <InView class-name="EnterDetail" animate-class-name="fadeInUp" @in-view="onInView">
    <div class="decorate" />
    <InView class="title1" animate-class-name="fadeIn" v-if="current > 0" />
    <InView class="img1" animate-class-name="fadeIn delay-1x" v-if="current > 0" />
    <InView class="title2" animate-class-name="fadeIn" v-if="current > 1" />
    <InView class="img2" animate-class-name="fadeIn delay-1x" v-if="current > 1" />
    <InView class="title3" animate-class-name="fadeIn" v-if="current > 2" />
    <InView class="img3" animate-class-name="fadeIn delay-1x" v-if="current > 2" />
    <InView class="img4" animate-class-name="fadeIn" v-if="current > 3" />
    <InView class="music1" v-if="current > 4" />
    <InView class="music2" v-if="current > 4" />
    <InView class="card" animate-class-name="fadeIn" v-if="current > 4" />
  </InView>
</template>
<style lang="scss" scoped>
@keyframes zoomInOut {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}

.EnterDetail {
  height: 2932px;
  background: url('@/assets/images/enter-bg.png') no-repeat center center;
  background-size: contain;
  position: relative;
  padding-top: 2239px;
  opacity: 0;

  .decorate {
    width: 150px;
    height: 150px;
    background: url('@/assets/images/2.gif') no-repeat center center;
    background-size: contain;
    position: absolute;
    top: -40px;
    right: 20px;
  }

  .title1,
  .title2,
  .title3,
  .img1,
  .img2,
  .img3,
  .img4 {
    position: absolute;
    opacity: 0;
  }

  .title1 {
    width: 264px;
    height: 85px;
    background: url('@/assets/images/step-1.png') no-repeat center center;
    background-size: contain;
    top: 359px;
    left: 83px;
    z-index: 2;
  }

  .title2 {
    width: 449px;
    height: 222px;
    background: url('@/assets/images/step-2.png') no-repeat center center;
    background-size: contain;
    top: 633px;
    left: 203px;
  }

  .title3 {
    width: 409px;
    height: 283px;
    background: url('@/assets/images/step-3.png') no-repeat center center;
    background-size: contain;
    left: 82px;
    top: 1240px;
  }

  .img1 {
    width: 410px;
    height: 344px;
    background: url('@/assets/images/step-img.png') no-repeat center center;
    background-size: contain;
    top: 156px;
    left: 306px;
  }

  .img2 {
    width: 577px;
    height: 391px;
    background: url('@/assets/images/step-img-2.png') no-repeat center center;
    background-size: contain;
    left: 94px;
    top: 820px;
  }

  .img3 {
    width: 583px;
    height: 409px;
    background: url('@/assets/images/step-img-3.png') no-repeat center center;
    background-size: contain;
    left: 88px;
    top: 1474px;
  }

  .img4 {
    width: 489px;
    height: 303px;
    background: url('@/assets/images/step-4.png') no-repeat center center;
    background-size: contain;
    top: 1842px;
    right: 94px;
    opacity: 0;
  }

  .card {
    height: 565px;
    background: url('@/assets/images/step-card.png') no-repeat center center;
    background-size: contain;
    opacity: 0;
  }

  .music1,
  .music2 {
    height: 49px;
    width: 43px;
    background: url('@/assets/images/music-1.png') no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 1474px;
    left: 100px;
    animation: zoomInOut 3s infinite;
  }

  .music2 {
    height: 77px;
    width: 38px;
    background: url('@/assets/images/music-2.png') no-repeat center center;
    background-size: contain;
    left: 584px;
    top: 1215px;
  }
}
</style>
<script setup lang="ts">
import InView from '@/components/InView.vue'
import { ref } from 'vue'
import { sleep } from '@/utils'

const current = ref(0)
const onInView = async () => {
  for (; current.value < 5; current.value++) {
    await sleep(800)
  }
}
</script>
